<template>
  <!-- <div id="app">
    <div class="qun flex" v-if="isshow">
       左边部分 
      <div class="left" :style="{ width: width + 'px' }">
        <div class="top">
          <img
            class="touxiang"
            src="https://img1.baidu.com/it/u=1589844976,1320435713&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
            alt=""
          />
          <p class="name">admin 管理员</p>
        </div>
       折叠面板 
        <div class="cs" v-if="list.object">
          <el-collapse v-model="activeName" accordion>
            <el-collapse-item
              v-show="show"
              :title="item.authName"
              :name="item.id"
              v-for="item in list.object"
              :key="item.id"
            >
              <router-link :to="{ name: luyou }">
                <div
                  v-for="shuju in item.children"
                  :key="shuju.id"
                  class="liangji"
                  @click="chuan(item.id, shuju.id)"
                >
                  {{ shuju.authName }}
                </div>
              </router-link>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
     右边部分 
      <div class="right" :style="{ width: width1 + '%' }">
        <nav class="tou flex">
          <div @click="dianji" v-if="show">
            <el-icon><Fold /></el-icon>
          </div>
          <div @click="dianji" v-else>
            <el-icon><Expand /></el-icon>
          </div>

          <div class="but">退出</div>
        </nav>
        展示区域 
        <div class="nr">
          <div class="syx">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <router-link to="/denglu"></router-link>
      <router-view></router-view>
    </div>
  </div> -->
  <div id="app">
    <router-view></router-view>
  </div>
</template>
<script setup lang="ts">
// 因为setup中没有this,而且这时候还没有渲染.所以,在setup中,也可以使用provide/inject把echarts引入进来.
//在根组件里引入echarts,一般是App.vue
import * as echarts from 'echarts';
import { provide } from 'vue';
provide('echarts', echarts);
// import { ref, reactive, onMounted, watch } from 'vue';
// import { apis } from '@/http/api';
// import { useRoute } from 'vue-router';
// //组件内容
// const activeName = ref('1');
// const width = ref(200);
// const width1 = ref(80);
// const show = ref(true);
// const isshow = ref(true);
// const route = useRoute();
// //默认参数
// const luyou = ref('user');

// //获取数据
// onMounted(() => {
//   huoqu();
// });
// //获取首页左侧数据列表
// const list = reactive({
//   object: null as any,
// });

// const huoqu = () => {
//   const a = apis.getshouye().then(({ data: res }) => {
//     // console.log('------', res);
//     list.object = res;
//   });
//   //   console.log(a);
// };

// //传递数据
// const chuan = (val: number, id: number, xuan?: number) => {
//   console.log(val, id);
//   switch (val) {
//     case 125:
//       luyou.value = 'user';
//       break;
//     case 103:
//       luyou.value = 'quanxian';
//       break;
//     case 101:
//       luyou.value = 'shangpin';
//       break;
//     case 102:
//       luyou.value = 'dingdan';
//       break;
//     case 145:
//       luyou.value = 'tongji';
//       break;

//     default:
//       break;
//   }
// };

// //点击左边变形
// let i = 0;
// const dianji = () => {
//   i++;
//   console.log(i);

//   if (i % 2 == 0) {
//     width.value = 200;
//     width1.value = 80;
//     show.value = true;
//   } else {
//     width.value = 60;
//     width1.value = 95;
//     show.value = false;
//   }
// };
// watch(
//   () => route.name,
//   (newPath, oldPath) => {
//     console.log(newPath, oldPath);
//     if (newPath == 'denglu') {
//       isshow.value = false;
//     } else {
//       isshow.value = true;
//     }
//   }
// );
</script>
<style lang="less">
//初始化
* {
  padding: 0;
  margin: 0;
}

ul,
li {
  list-style: none;
}
a {
  text-decoration: none;
}
//公共样式
//弹性布局+居中+两端
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
//弹性布局+居中+环绕
.flex1 {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
//弹性布局+居中+居中
.flex2 {
  display: flex;
  align-items: center;
  justify-content: center;
}
//弹性布局 + 居中
.fu {
  display: flex;
  align-items: center;
}
//基础弹性布局
.jichu {
  display: flex;
}
//超出省略
.txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
//块标签居中
.zhong {
  margin: 0 auto;
}
//字体居中
.t-a {
  text-align: center;
}
//小图标
.xtb {
  width: 48px;
  height: 22px;
  line-height: 22px;
  border-radius: 3px;
  text-align: center;
  color: #fff;
  background: #c4a57f;
  font-weight: 400;
  font-size: 12px;
  border: none;
  margin-right: 6px;
}
//img width 100vw
.wv {
  width: 100vw;
  display: block;
}
//开始图片
.beijing {
  margin-top: 40px;
  height: 212px;
  width: 100vw;
}

.el-step__title {
  font-size: 13px;
  line-height: 38px;
}

//app样式

// .qun {
//   width: 100vw;
//   height: 100vh;
//   overflow: hidden;
// }
// .left {
//   //   width: 20%;
//   height: 100%;

//   box-sizing: border-box;
//   background: #304156;
//   .top {
//     margin: 50px 0 0;
//     height: 98px;
//     text-align: center;

//     .touxiang {
//       width: 60px;
//       height: 60px;
//     }
//     .name {
//       color: #fff;
//       font-size: 16px;
//       margin: 10px 0;
//     }
//   }
//   .cs {
//     margin-top: 20px;
//   }
//   .liangji {
//     padding: 0 10px;
//     // color: #fff;
//     line-height: 40px;
//     // background: #304156;
//   }
//   .liangji:hover {
//     background-color: #304158;
//     color: #fff;
//   }
// }
// .right {
//   //   width: 80%;

//   height: 100%;
//   box-sizing: border-box;
//   //   border: 1px solid #000;
//   .tou {
//     width: 100%;
//     height: 50px;
//     padding: 0 20px;
//     box-sizing: border-box;
//     color: #b4b4b4;
//     background-color: #f1f1f1;
//     //按钮
//     .but {
//       width: 60px;
//       height: 32px;
//       background-color: #409eff;
//       text-align: center;
//       line-height: 32px;
//       border-radius: 7px;
//       font-size: 14px;
//       color: #fff;
//     }
//   }
//   //展示区域
//   .nr {
//     width: 100%;
//     padding: 20px;
//     box-sizing: border-box;
//     .syx {
//       width: 100%;

//       background-color: #f1f1f1;
//       border-radius: 10px;
//       padding: 10px;
//       padding-bottom: 100px;
//       box-sizing: border-box;
//     }
//   }
// }
</style>
